<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24" ref="hMain">
        <div class="head-container" :style="{ height: tableHeight + 'px' }" style="overflow-y: scroll;">
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
            :filter-node-method="filterNode" :default-expanded-keys="expandedkeys" :current-node-key="currentNodekey"
                   ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" :style="isSize">
            <template slot-scope="{ node, data }">
              <span class="span-ellipsis" :title="node.label" :style="isSize">{{ node.label }}</span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-tabs v-if="isfondsCode" type="border-card" v-model="activeName" :style="{ height: tableHeight + 'px' }">
          <el-tab-pane label="无数据" name="first">
            <el-empty description=" " style="margin-top:10%;"></el-empty>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-else v-model="activeName" type="border-card">
          <!-- start 硬皮卷 -->
          <el-tab-pane label="硬皮卷" name="first">
            <el-form :model="juanParams" ref="juanForm" :inline="true" v-show="showJuanSearch" label-width="68px">
              <el-form-item label="案卷号" prop="keyword">
                <el-input v-model="juanParams.keyword" placeholder="请输入案卷号" clearable style="width: 240px" maxlength="30"
                  @keyup.enter.native="handleJuanQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleJuanQuery">查询</el-button>
                <el-button icon="el-icon-refresh" @click="resetJuanQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-top" @click="outBoundJuan"
                  v-hasPermi="['archive:warehouseManagement:archiveStorage:out']">出库</el-button>
              </el-col>
              <right-toolbar :showSearch.sync="showJuanSearch"></right-toolbar>
            </el-row>
            <el-table v-loading="juanLoading" :data="juanList" @selection-change="juanSelectionChange" height="500"
              @row-dblclick="openDetails">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="序号" type="index" :index="table_index_juan" prop="daId" />
              <el-table-column label="案卷题名" prop="title" :show-overflow-tooltip="true" />
              <el-table-column label="案卷号" prop="ajh" :show-overflow-tooltip="true" />
              <el-table-column label="档案门类" prop="ml" :show-overflow-tooltip="true" />
              <el-table-column label="档号" prop="dh" :show-overflow-tooltip="true" />
              <el-table-column label="全宗号" prop="qzh" :show-overflow-tooltip="true" />
<!--              <el-table-column label="整理方式" prop="zlfs" :show-overflow-tooltip="true" />-->
              <el-table-column label="保管期限" prop="bgqx" :show-overflow-tooltip="true" />
              <el-table-column label="归档司局" prop="gdsj" :show-overflow-tooltip="true" />
              <el-table-column label="归档处室" prop="gdcs" :show-overflow-tooltip="true" />
              <el-table-column label="上架时间" prop="sjTime" :show-overflow-tooltip="true" />
              <el-table-column label="位置" prop="wz" :show-overflow-tooltip="true" />
            </el-table>
            <pagination v-show="juanTotal > 0" :total="juanTotal" :page.sync="juanParams.pageNum"
              :limit.sync="juanParams.pageSize" @pagination="getJuanList" />
          </el-tab-pane>
          <!-- end 硬皮卷 -->

          <!-- start 档案盒 -->
          <el-tab-pane label="档案盒" name="second">
            <el-form :model="heParams" ref="heForm" :inline="true" v-show="showHeSearch" label-width="68px">
              <el-form-item label="盒号" prop="keyword">
                <el-input v-model="heParams.keyword" placeholder="请输入盒号" clearable style="width: 240px" maxlength="30"
                  @keyup.enter.native="handleHeQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleHeQuery">查询</el-button>
                <el-button icon="el-icon-refresh" @click="resetHeQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-top" @click="outBoundHe"
                  v-hasPermi="['archive:warehouseManagement:archiveStorage:out']">出库</el-button>
              </el-col>
              <right-toolbar :showSearch.sync="showHeSearch"></right-toolbar>
            </el-row>
            <el-table v-loading="heLoading" :data="heList" @selection-change="heSelectionChange" height="500"
              @row-dblclick="openDetails">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="序号" type="index" :index="table_index_he" prop="daId" />
              <el-table-column label="题名" prop="title" :show-overflow-tooltip="true" />
              <el-table-column label="盒号" prop="hehao" :show-overflow-tooltip="true" />
              <el-table-column label="档案门类" prop="ml" :show-overflow-tooltip="true" />
              <el-table-column label="档号" prop="dh" :show-overflow-tooltip="true" />
              <el-table-column label="全宗号" prop="qzh" :show-overflow-tooltip="true" />
<!--              <el-table-column label="整理方式" prop="zlfs" :show-overflow-tooltip="true" />-->
              <el-table-column label="保管期限" prop="bgqx" :show-overflow-tooltip="true" />
              <el-table-column label="归档司局" prop="gdsj" :show-overflow-tooltip="true" />
              <el-table-column label="归档处室" prop="gdcs" :show-overflow-tooltip="true" />
              <el-table-column label="上架时间" prop="sjTime" :show-overflow-tooltip="true" />
              <el-table-column label="位置" prop="wz" :show-overflow-tooltip="true" />
            </el-table>
            <pagination v-show="heTotal > 0" :total="heTotal" :page.sync="heParams.pageNum"
              :limit.sync="heParams.pageSize" @pagination="getHeList" />
          </el-tab-pane>
          <!-- end 档案盒 -->
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 出库页面 -->
    <el-dialog title="档案出库" :visible.sync="outopen" width="35%" append-to-body>
      <el-form ref="outForm" :model="outForm" :rules="outRules" label-width="100px">
        <el-form-item label="出库原因" prop="ckyy">
          <el-select v-model="outForm.ckyy" clearable placeholder="请选择" style="width: 100%">
            <el-option v-for="dict in dict.type.OUTBOUND_REASON" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="outForm.remark" type="textarea" placeholder="请输入内容" maxlength="1024"  show-word-limit  :autosize="{ minRows: 14, maxRows: 24}" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="outBound">确 定</el-button>
        <el-button @click="outopen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--start  组件详情 -->
    <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="celldbData"
      @detailsHandleClose="detailsHandleClose">
    </jianDetailsOpen>
    <!--end 组件详情 -->
    <!-- start 组卷\项目详情 -->
    <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData"
      @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
    <!-- end 组卷\项目详情 -->
  </div>
</template>

<script>
import { getTreeList } from "@/api/archive/warehouseManagement/warehouseInformation";
import {getGridList, getthbytreenodeHeaderList} from "@/api/archive/warehouseManagement/upDownShelves";
import estimateTableHeight from '@/mixins/estimateTableHeight'
import { outBound, outList, getcateidbyid } from "@/api/archive/warehouseManagement/archiveOutbound";
import { getLastIndexOf } from "@/utils";
import jianDetailsOpen from "@/components/componentsJianDetails";
import juanDetailsOpen from "@/components/componentsJuanDetails";
//vue项目中element-tabel自动计算高度
export default {
  name: "index",
  archive_Dicts: ['BGQX', 'OUTBOUND_REASON'],
  mixins: [estimateTableHeight], // 混入方法
  components: { jianDetailsOpen, juanDetailsOpen },
  data() {
    return {
      // 树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      //默认展开的树节点
      expandedkeys: [],
      //默认选中的树节点
      currentNodekey: "",
      parentKufangIdList: [],
      //上下架form
      upDownForm: {},
      //tabs标签切换默认选择项
      activeName: 'first',
      // 判断如果不是档案格就不显示右侧tabs的数据
      isfondsCode: "",
      juanParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined
      },
      showJuanSearch: true,
      juanLoading: false,
      // 按卷上架表格数据
      juanList: [],
      // 总条数
      juanTotal: 0,
      // 选中数据
      juanIds: [],
      juanDetail: {},
      // 非单个禁用
      juanSingle: true,
      // 非多个禁用
      juanMultiple: true,

      heParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined
      },
      showHeSearch: true,
      heLoading: false,
      // 按卷上架表格数据
      heList: [],
      // 总条数
      heTotal: 0,
      // 选中数据
      heIds: [],
      heDetail: {},
      // 非单个禁用
      heSingle: true,
      // 非多个禁用
      heMultiple: true,

      // 下架弹窗
      outPage: "",
      outopen: false,
      outForm: {
        ckyy: undefined,
        remark: undefined
      },
      outRules: {
        ckyy: [
          { required: true, message: "出库原因不能为空", trigger: "blur" }
        ]
      },

      jianDetailsOpen: false,//件详情弹窗
      juanDetailsOpen: false,//卷详情弹窗
    }
  },
  created() {
    this.getDeptTree()
  },
  computed: {

    isSize() {

      if (this.$store.getters.size == 'small') {
        this.size = 'font-size: 12px;'
      } else {
        this.size = 'font-size: 14px;'
      }
      return this.size
    }


  },
  methods: {
    getDeptTree() {
      getTreeList().then(response => {
        console.log(response.data)
        this.deptOptions = response.data;
        this.isfondsCode = true
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data, node) {
      console.log(data)
      console.log(node)
      // id
      // this.upDownForm.id = data.id
      if (data.nodeType == "region") {
        const id = data.id.split("_")
        this.upDownForm.id = id[0]
      } else {
        this.upDownForm.id = data.id
      }
      // 节点类型
      this.upDownForm.nodeType = data.nodeType
      // 库房id
      this.parentKufangIdList = []
      this.getParent(node)
      this.upDownForm.kufangId = this.parentKufangIdList[0]

      this.isfondsCode = data.nodeType == "grid" ? false : true;

      if (this.upDownForm.nodeType == "shelf") {
        getGridList(this.upDownForm.id).then(response => {
          const children = response.rows.map(item => {
            return {
              id: item.gridId,
              label: item.gridName + " 已上架" + item.putawayNum,
              nodeType: "grid"
            }
          }); // 子节点数据
          data.children = children; // 将子节点数据追加到当前节点的children属性中
          this.deptOptions = [...this.deptOptions]; // 重新赋值，触发更新
        })
      }

      if (this.upDownForm.nodeType == "grid") {
        this.getJuanList()
        this.getHeList()
      }
    },
    // 判断获取库房id
    getParent(node) {
      // 判断当前节点是否有父节点，并且父节点上的data不能是数组
      if (node.parent && !Array.isArray(node.parent.data)) {
        if (node.parent.data.id != null && node.parent.data.nodeType == "store") {
          // 将父节点上data的menuid存储在 `parentlist` 里
          node.parent.data instanceof Object && this.parentKufangIdList.push(node.parent.data.id)

        }
        // 递归调用 父节点上有父节点
        this.getParent(node.parent)
        // 当父节点上data是数组时点击对象为当前tree最高目录 并且parentList必须是0
      }
    },


    // 硬皮卷 搜索按钮操作
    handleJuanQuery() {
      this.juanParams.pageNum = 1;
      this.getJuanList()
    },
    // 硬皮卷 重置按钮操作
    resetJuanQuery() {
      this.resetForm("juanForm");
      this.handleJuanQuery()
    },
    juanSelectionChange(selection) {
      this.juanIds = selection.map(item => item.daId)
      this.juanDetail = selection.map(item => {
        return {
          boxId: item.boxId,
          sjType: item.sjType,
          daId: item.daId,
          dh: item.dh,
          title: item.title,
          subTableName: item.subTableName
        }
      })
      this.juanSingle = selection.length != 1
      this.juanMultiple = !selection.length
    },
    table_index_juan(index) {
      return (this.juanParams.pageNum - 1) * this.juanParams.pageSize + index + 1;
    },
    getJuanList() {
      this.juanLoading = true
      this.juanParams.gridId = this.upDownForm.id
      this.juanParams.sjType = '1'
      outList(this.juanParams).then(response => {
        this.juanList = response.rows
        for (let i = 0; i < response.rows.length; i++) {
          // 渲染表格数据
          for (let j = 0; j < this.dict.type.BGQX.length; j++) {
            if (response.rows[i].bgqx == this.dict.type.BGQX[j].value) {
              this.juanList[i].bgqx = this.dict.type.BGQX[j].label
            }
          }
        }
        this.juanTotal = response.total
        this.juanLoading = false
      })
    },
    // 硬皮卷---出库
    outBoundJuan(row) {
      this.resetForm('outForm')
      const ids = row.id || this.juanIds
      if (ids.length == 0) {
        this.$modal.msgWarning("请选择至少一条记录");
      } else {
        this.resetOutForm()
        this.outopen = true
        this.outPage = "outJuan"
      }
    },
    // 硬皮卷/档案盒--查看详情
    openDetails(row) {
      var level = "";
      var type = "";
      console.log(row)
      if (getLastIndexOf(row.subTableName) == "F") {  //F 件
        level = 0
        type = "f"
      } else if (getLastIndexOf(row.subTableName) == "V") { //卷
        level = 1
        type = "v"
      } else { //项目
        level = 3
        type = "x"
      }
      this.form = {
        id: row.daId,
        type: type
      }
      getcateidbyid(this.form).then(response => {
        var categoryId = response.data
        var menuId = this.$route.meta.menuId
        getthbytreenodeHeaderList({
          categoryId: categoryId, menuId: menuId, subTableName: row.subTableName
        }).then(res => {
          var tableHeaderList = res.rows;
          this.celldbData = {
            id: row.daId,
            categoryId: categoryId,
            menuId: menuId,
            sub_table_name: row.subTableName,
            label: row.title,
            level: level,
            ifSub_table_name: row.subTableName,
            isDel: "0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
            tableHeaderList: tableHeaderList
          }
          this.$nextTick(() => {
            if (getLastIndexOf(row.subTableName) == "F") {  //F 进入件详情
              this.jianDetailsOpen = true;
            } else { //进入卷详情 和项目详情
              this.juanDetailsOpen = true
            }
          })
        })
      })
    },
    //关闭详情页面
    detailsHandleClose() {
      this.jianDetailsOpen = false;
      this.juanDetailsOpen = false;
    },


    resetOutForm() {
      this.outForm = {
        ckyy: undefined,
        remark: undefined
      }
    },
    // 确认出库
    outBound() {
      this.outForm.storeId = this.upDownForm.kufangId
      var outBoundList = []
      if (this.outPage == "outJuan") {
        this.outForm.outBoundList = outBoundList.concat(this.juanDetail)
      } else if (this.outPage == "outHe") {
        this.outForm.outBoundList = outBoundList.concat(this.heDetail)
      }
      this.$refs["outForm"].validate(valid => {
        if (valid) {
          outBound(this.outForm).then(response => {
            this.$modal.msgSuccess("出库成功");
            this.outopen = false
            this.outPage = ""
            this.getJuanList()
            this.getHeList()
          })
        }
      })
    },

    // 档案盒 搜索按钮操作
    handleHeQuery() {
      this.heParams.pageNum = 1;
      this.getHeList()
    },
    // 硬皮卷 重置按钮操作
    resetHeQuery() {
      this.resetForm("heForm");
      this.handleHeQuery()
    },
    heSelectionChange(selection) {
      this.heIds = selection.map(item => item.daId)
      this.heDetail = selection.map(item => {
        return {
          boxId: item.boxId,
          sjType: item.sjType,
          daId: item.daId,
          dh: item.dh,
          title: item.title,
          subTableName: item.subTableName
        }
      })
      this.heSingle = selection.length != 1
      this.heMultiple = !selection.length
    },
    table_index_he(index) {
      return (this.heParams.pageNum - 1) * this.heParams.pageSize + index + 1;
    },
    getHeList() {
      this.heLoading = true
      this.heParams.gridId = this.upDownForm.id
      this.heParams.sjType = '0'
      outList(this.heParams).then(response => {
        this.heList = response.rows
        for (let i = 0; i < response.rows.length; i++) {
          // 渲染表格数据
          for (let j = 0; j < this.dict.type.BGQX.length; j++) {
            if (response.rows[i].bgqx == this.dict.type.BGQX[j].value) {
              this.heList[i].bgqx = this.dict.type.BGQX[j].label
            }
          }
        }
        this.heTotal = response.total
        this.heLoading = false
      })
    },
    // 档案盒---出库按钮
    outBoundHe(row) {
      this.resetForm('outForm')
      const ids = row.id || this.heIds
      if (ids.length == 0) {
        this.$modal.msgWarning("请选择至少一条记录");
      } else {
        this.resetOutForm()
        this.outopen = true
        this.outPage = "outHe"
      }
    }
  },
}
</script>

<style lang="scss" scoped>
:v-deep .el-textarea .el-input__count {
  background-color: transparent; /* 设置为透明背景 */
  position: absolute; /* 使用绝对定位 */
  bottom: 5px; /* 根据实际情况调整位置 */
  right: 5px; /* 根据实际情况调整位置 */
  /* 其他样式调整，如字体大小、颜色等 */
}
</style>
